@import "../../common.less";

.xheader {
    &.fixed {
        position: fixed;
        left    : 0;
        top     : 0;
        width   : 100%;
        z-index : 11;
    }

    &.modeleft {
        .header {
            .center {
                align-items    : center;
                justify-content: start;
            }

            .left {
                width: auto;
            }
        }
    }

    .navt {
        background-color: rgba(0, 0, 0, 0);
    }

    .header-y {
        .flexRow();
        .left {
            font-size      : 38rpx;
            justify-content: center;
            padding-left: 40rpx;
            .leftIcon {
                .flexCenter();
                width          : fit-content;
                justify-content: center;
                height         : 100%;

                &.home,
                &.search {
                    .icon {
                        width: 32rpx;
                    }
                }

                .icon {
                    background-color: rgba(255,255,255,0.5);
                    padding: 10rpx;
                    width : 32rpx;
                    height: 32rpx;
                    border-radius: 50%;
                    margin-right: 20rpx;
                }
            }

            .slotLeft {
                flex    : 1;
                overflow: hidden;
                height  : 100%;
            }
        }

        .left,
        .right {
            width      : auto;
            flex-shrink: 0;
        }

        .center {
            position: relative;
            color: white;
            .flexRow();
            align-items    : center;
            justify-content: center;
            position       : relative;
            overflow       : hidden;
            flex           : 1;
            overflow       : hidden;

            .text {
                padding-left   : 10rpx;
                color: #000;
                font-family: "PingFang SC";
                font-weight   : 600;
                font-size      : 34rpx;
            }

            &.xslot {
                align-items    : center;
                justify-content: flex-start;
            }
            image{
                background-color: rgba(255,255,255,0.5);
                padding: 10rpx;
                width : 32rpx;
                height: 32rpx;
                border-radius: 50%;
            }
            .shareBtns{
                background: transparent;
                position: absolute;
                right: 20rpx;
                width: 60rpx;
                height: 60rpx;
                padding: 0 !important;
                &:after {
                    content: '';
                    border: none !important;
                }
            }
        }
    }
}